import React from 'react'
import { Button, Form, Input } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { useNavigate} from 'react-router-dom';
import './index.css'
import axios from 'axios';
import { message } from 'antd';
export default function Login() {
  const navigate =useNavigate();
  const onFinish = (values: any) => {
    console.log('Success:', values);
    axios.get(`http://localhost:8000/users?username=${values.username}&password=${values.password}&roleState=true&_expand=role`).then(
      res=>{
        // console.log(res.data);
        if(res.data.length===0){
          message.error('用户名和密码不匹配')
        }else{
          localStorage.setItem("token",JSON.stringify(res.data[0]))
           navigate('/')  
        }
      }
    )
  };

  return (
    <div style={{ background: 'rgb(35, 39, 65)', height: "100%" }}>
      <div className="formContainer">
      <div className="logintitle">全球新闻发布管理系统</div>
      <Form
      name="basic"
      onFinish={onFinish}
      className='login-form'
    >
      <Form.Item
        name="username"
        rules={[{ required: true, message: 'Please input your username!' }]}
      >
      <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
      </Form.Item>

      <Form.Item
        name="password"
        rules={[{ required: true, message: 'Please input your password!' }]}
      >
       <Input
            prefix={<LockOutlined className="site-form-item-icon" />}
            type="password"
            placeholder="Password"
        />
      </Form.Item>


      <Form.Item  >
        <Button type="primary" htmlType="submit"  className="login-form-button">
          Submit
        </Button>
      </Form.Item>
    </Form>
      </div>
    </div>
  )
}
